<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<style>

    .order-ul li {
        padding-top: 10px;
    }

</style>

<body>

<div id="evaluate_order_list" style="overflow: hidden">

    <ul class="order-ul">
    </ul>

</div>

</body>

<!--获取房源并放入列表-->

<script>

    let is;

    //删除订单函数
    function delOrder(id) {


        //监听删除事件
        Event.on('do_delete', function () {

            $('#evaluate_order_' + id).remove();
            is.refresh();

        }, true);


        //显示删除确认面板
        Backs.push(function () {
            mydialog.display('html/dialog/delorderconfirm.html');
        }, function () {

            if (mydialog.isShow) {
                mydialog.close();
            }
            else {
                return true;    //事件已经失效
            }

        }, true);//跳过事件

    }

    function evaluateOrder(id) {

        Backs.push(function () {

            Event.on('evaluate-submit', function (data) {

                data += '&orderId=' + id;

                $.post('/order/tenant/evaluate?' + data, function () {

                    //评价成功后移除订单

                    $('#evaluate_order_' + id).remove();
                    is.refresh();
                }).error(
                    function (err) {
                        alert(err.responseText);
                    }
                );

            }, true);

            dynamicPage.display('html/evaluate.html');
        }, function () {

            if (dialog.isShow) {
                dialog.close();
            }
            else {
                return true;    //事件已经失效
            }

        });

    }


    loadjs('https://cdn.staticfile.org/iScroll/5.2.0/iscroll.min.js', function () {

        $('#evaluate_order_list').height($(window).height() - 55);

        //初始化滑动组件
        is = new IScroll('#evaluate_order_list', {
            scrollbars: false,
            mouseWheel: false,
            interactiveScrollbars: false,
            shrinkScrollbars: 'scale',
            fadeScrollbars: false,
            scrollY: true,
            probeType: 1,
            bindToWrapper: true,
            click: true,
            tap: true
        });

        //解决手机端无法滑动问题.
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, {
            capture: true,
            passive: false
        });

        function addOrder(order) {


            let imgU = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546502159888&di=ba8195972eb78359422bb19a4e6b59d1&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01481b7750ea1d245e.png";

            if (order.room.images && order.room.images.length > 0) {
                imgU = "/resource/preview/3/" + order.room.images[0] + '.jpg';
            }

            $('#evaluate_order_list ul').append('  <li id=evaluate_order_' + order.id + '>' +
                '                <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;">' +
                '                    <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; -webkit-box-align: center; align-items: center; width: auto; ">' +
                '                        <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; cursor: pointer; width: 95%; background-color: rgb(255, 255, 255); border-radius: 11.456px; min-height: 146.064px;">' +
                '                            <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; cursor: pointer; -webkit-box-align: center; align-items: center; width: auto; height: 32.4587px; padding-top: 4.77333px; padding-left: 11.456px; padding-right: 11.456px;">' +
                '' +
                '                                <svg t="1547378558176" class="icon" style="display: flex; width: 15.184px; height: 10.184px" viewBox="0 0 1045 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3060" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.1015625" height="200"><defs><style type="text/css"></style></defs><path d="M1031.975006 202.254269 501.464325 753.980748 308.593431 753.980748 308.593431 561.109854 841.032821 11.312084C856.115325-3.770421 880.53278-3.770421 895.615284 11.312084L1031.975006 147.671806C1047.05751 162.754309 1047.05751 187.171764 1031.975006 202.254269ZM868.304766 93.127916 385.741788 599.684033 385.741788 676.83239 462.890146 676.83239 950.159172 174.982324 868.304766 93.127916ZM540.038504 98.181134 77.148358 98.181134 77.148358 946.813068 925.780291 946.813068 925.780291 483.922922C925.780291 455.956643 933.958018 450.170516 961.924298 450.170516 989.929151 450.170516 1002.928649 455.956643 1002.928649 483.922922L1002.928649 946.813068C1002.928649 984.075724 963.042948 1023.961426 925.780291 1023.961426L77.148358 1023.961426C39.885701 1023.961426 0 984.075724 0 946.813068L0 98.181134C0 60.879903 39.885701 21.032776 77.148358 21.032776L540.038504 21.032776C568.004783 21.032776 573.79091 34.070849 573.79091 62.037129 573.79091 89.964834 568.004783 98.181134 540.038504 98.181134Z" p-id="3061" fill="#1296db"></path></svg>' +
                '' +
                '                                <span numberoflines="1"' +
                '                                      style="white-space: nowrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 11.456px; margin-left: 2.864px; margin-right: 4.77333px; color: rgb(51, 51, 51); font-weight: lighter; overflow: hidden;">等待评价</span><img' +
                '                                    fallbacksource="[object Object]"' +
                '                                    src="//gw.alicdn.com/tfs/TB1qfKHbCzqK1RjSZFpXXakSXXa-30-45.png"' +
                '                                    style="display: flex; width: 3.81867px; height: 6.68267px; color: rgb(204, 204, 204);">' +
                '                            </div>' +
                '                            <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start;' +
                '    justify-content: center; flex-shrink: 0; -webkit-box-pack: center; -webkit-box-align: center;    margin-left: 13px;        margin-right: 13px;width: auto; height: 78.2827px; background-color: rgb(255, 255, 255);">' +
                '                                <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start;' +
                '    justify-content: space-between; flex-shrink: 0; -webkit-box-pack: justify; width: auto; height: 66.8267px;">' +
                '                                    <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0;">' +
                '                                        <img fallbacksource="[object Object]"' +
                '                                             src="' + imgU + '"' +
                '                                             style="display: flex; width: 66.8267px; height: 66.8267px; border-radius: 2.864px; background-color: rgb(242, 242, 242);">' +
                '                                        <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; margin-left: 11.456px; margin-right: 14.32px; ">' +
                '                                            <span numberoflines="2"' +
                '                                                  style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 11.456px; max-width: 162.293px; max-height: 32.4587px; text-overflow: ellipsis; line-height: 16.2293px; color: rgb(51, 51, 51); -webkit-line-clamp: 2; overflow: hidden;">' + order.room.name + '</span><span' +
                '                                                numberoflines="2"' +
                '                                                style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 11.456px; max-width: 162.293px; height: 32.4587px; text-overflow: ellipsis; margin-top: 4.77333px; color: rgb(156, 156, 156); font-weight: lighter; -webkit-line-clamp: 2; overflow: hidden;">' + order.room.location.address + '' + order.room.location.detailedDescription + '</span>' +
                '                                        </div>' +
                '                                    </div>' +
                '                                    <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;">' +
                '                                        <span numberoflines="1"' +
                '                                              style="white-space: nowrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 12.4107px; color: rgb(51, 51, 51); text-align: right; overflow: hidden;">' + order.price.text + '</span><span' +
                '                                            style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 11.456px; text-align: right; color: rgb(153, 153, 153);">x' + order.priceCount + '</span>' +
                '                                    </div>' +
                '                                </div>' +
                '                            </div>' +
                '                            <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; place-content: flex-start space-between; flex-shrink: 0; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; height: 41.0507px; padding-left: 11.456px; padding-right: 11.456px;    align-content: flex-start;' +
                '    justify-content: flex-end;">' +
                '                                <div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; place-content: flex-start space-between; flex-shrink: 0; -webkit-box-pack: justify; -webkit-box-align: center; align-items: center; padding-bottom: 8.592px;">' +
                '                                    <div style="border: 1px solid rgb(151, 151, 151); position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row;     align-content: flex-start;' +
                '    justify-content: center; flex-shrink: 0; cursor: pointer; -webkit-box-pack: center; -webkit-box-align: center; align-items: center; width: 71.6px; height: 25.776px; border-radius: 23.8667px;">' +
                '                                        <span style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 12.4107px; color: rgb(102, 102, 102);" onclick=delOrder("' + order.id + '")>删除</span>' +

                '                                    </div>' +
                '                                    <div style="border: 1px solid rgb(255, 80, 0); position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row;     align-content: flex-start;' +
                '    justify-content: center; flex-shrink: 0; cursor: pointer; -webkit-box-pack: center; -webkit-box-align: center; align-items: center; width: 71.6px; height: 25.776px; border-radius: 23.8667px; margin-left: 9.54667px;">' +
                '                                        <span style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 12.4107px; color: rgb(255, 80, 0);" onclick=evaluateOrder("' + order.id + '")>评价</span>' +
                '                                    </div>' +
                '                                </div>' +
                '                            </div>' +
                '                        </div>' +
                '                    </div>' +
                '                </div>' +
                '' +
                '            </li>');

            is.refresh();

        }

        $.get('/order/tenant/evaluate-order', function (ls) {
            for (let i in ls) {
                addOrder(ls[i]);
            }
        });


        Event.on('appendEvaluateOrder', function (id) {

            Event.onDisplay('#evaluate_orders', function () {

                $.get('/order/tenant/get', {id: id}, function (order) {

                    addOrder(order);

                });

            }, true);
        });


        Event.on('order.update', function (msg) {

            //移除一个订单
            if (msg.order.state = 7) {

                $('#evaluate_order_' + msg.order.id).remove();
            }



            //如果订单类型是待评价的就追加一个
            if (msg.order.state === 6) {
                addOrder(msg.order)
            }

            is.refresh();

        });


    });


</script>

</html>